<template>
  <view class="create-order">
    <view class="p-3 order-form-wrap">
      <u--form
        class="pl-3 pr-3 order-form-block"
        labelWidth="80"
        labelPosition="left"
        :model="orderForm"
        ref="form1"
      >
        <u-form-item label="客户" prop="CustName">
          <u--input
            v-model="orderForm.CustName"
            disabled
            disabledColor="#ffffff"
            border="none"
          >
          </u--input>
        </u-form-item>
        <u-form-item label="电话" prop="Tel">
          <u--input
            v-model="orderForm.Tel"
            border="none"
            disabled
            disabledColor="#ffffff"
          ></u--input>
        </u-form-item>
        <u-form-item label="地址" prop="Addr" labelWidth="55">
          <u--input
            v-model="orderForm.Addr"
            disabled
            disabledColor="#ffffff"
            border="none"
          >
          </u--input>
        </u-form-item>
      </u--form>

      <u--form
        class="pl-3 pr-3 order-form-block"
        labelWidth="80"
        labelPosition="left"
        :model="orderForm"
        ref="form1"
      >
        <u-form-item label="时间" prop="CancelDate">
          <u--input
            v-model="orderForm.CancelDate"
            disabled
            disabledColor="#ffffff"
            border="none"
          >
          </u--input>
        </u-form-item>
        <u-form-item label="原因" prop="CancelDescr">
          <u--input
            v-model="orderForm.CancelDescr"
            border="none"
            disabled
            disabledColor="#ffffff"
          ></u--input>
        </u-form-item>
      </u--form>
      <view class="order-form-single">
        <view
          class="pl-3 pr-3 order-form-title flex justify-between align-center"
        >
          <view>拒绝理由</view>
        </view>
        <u--textarea
          placeholder="请输入不同意退款的理由"
          confirmType="done"
          v-model="cancelDescr"
          maxlength="200"
          count
        ></u--textarea>
      </view>

      <u-button
        @click="handleOrderAdd"
        color="#F65D30"
        shape="circle"
        text="保存"
      ></u-button>
    </view>
  </view>
</template>

<script>
import { orderArbitrateEdit, getRepairView } from "@/apis/workOrder.js";

import { deepClone } from "@/util";

export default {
  data() {
    return {
      editId: "",
      cancelDescr: "",
      orderForm: {
        Descr: "", // 下单记录
        AppointmentDate: "",
        AppointmentTime: "",
        SalerCharge: "",
        RewardAmount: "",
        TGID: "",
        VirtCharge1: "",
        VirtCharge2: "",
        VirtCharge3: "",
        VirtCharge4: "",
        VirtCharge5: "",
        Employee1: "",
        Employee2: "",
        Employee3: "",
        Employee4: "",
        Employee5: "",
        CustId: "",
        CustName: "",
        Zone1: "",
        Zone2: "",
        Zone3: "",
        Tel: "", //电话
        Zone5: "",
        Contact: "", //联系人
        Zone1_2: "",
        Zone2_2: "",
        Zone3_2: "",
        Tel2: "",
        Zone5_2: "", //详细地址
        Contact2: "",
        CallPhotos: [],
        Remark1: "",
        Remark2: "",
        Remark3: "",
        Remark4: "",
        Remark5: "",
        ItemId: "",
        ItemName: "",
        ItemStyle: "",
        ItemBrand: "",
        ItemCatg: "",
        SerialNo: "",
        BuyDate: "",
        ExpaireDate: "",
        OrderSrc: "",
        OrderNo: "", // 来源单号
        CustType: "", // 客户类型
        RepairType: "", //  服务类型
        Saler: "", // 业务员
        Priority: false,
        RepairCatg: "", // 服务分类
        lnkRegion: "", //区域
      },
    };
  },
  // onPageScroll(res) {
  // 	console.log('onPageScroll', res)

  // },
  onLoad(option) {
    console.log("option", option);
    if (option.id) {
      this.editId = option.id;
      this.fetchRepairView();
    }
  },
  methods: {
    async fetchRepairView() {
      const custTypeMap = {
        0: "",
        1: "公司",
        2: "家庭",
      };
      const res = await getRepairView({
        RepairId: this.editId,
      });
      if (res.MsgCode != 0) return;
      console.log("fetchRepairView------->", res);
      const orderForm = res.data;
      orderForm.CustType = custTypeMap[res.data.CustType];
      orderForm.Descr = res.data.CallDescr;
      orderForm.Expense01 = parseFloat(orderForm.Expense01);
      orderForm.Expense02 = parseFloat(orderForm.Expense02);
      orderForm.Expense03 = parseFloat(orderForm.Expense03);
      orderForm.Expense04 = parseFloat(orderForm.Expense04);
      orderForm.Expense05 = parseFloat(orderForm.Expense05);
      orderForm.Revenue01 = parseFloat(orderForm.Revenue01);
      orderForm.Revenue02 = parseFloat(orderForm.Revenue02);
      orderForm.Revenue03 = parseFloat(orderForm.Revenue03);
      orderForm.Revenue04 = parseFloat(orderForm.Revenue04);
      orderForm.Revenue05 = parseFloat(orderForm.Revenue05);
      orderForm.VirtCharge1 = parseFloat(orderForm.VirtCharge1);
      orderForm.VirtCharge2 = parseFloat(orderForm.VirtCharge2);
      orderForm.VirtCharge3 = parseFloat(orderForm.VirtCharge3);
      orderForm.VirtCharge4 = parseFloat(orderForm.VirtCharge4);
      orderForm.VirtCharge5 = parseFloat(orderForm.VirtCharge5);
      orderForm.SalerId = orderForm.Saler;
      orderForm.Saler = orderForm.SalerName;
      orderForm.Employee1 = orderForm.Engineer1Name;
      orderForm.Employee2 = orderForm.Enginer2Name;
      orderForm.Employee3 = orderForm.Enginer3Name;
      orderForm.Employee4 = orderForm.Enginer4Name;
      orderForm.Employee5 = orderForm.Enginer5Name;

      delete orderForm.RepairDone;
      delete orderForm.CreditDetail;
      orderForm.CallPhotos =
        res.data.CallPhotos == "" ? [] : res.data.CallPhotos.split(",");
      this.imageList = orderForm.CallPhotos.map((item) => {
        return { url: "http://img.help10000.com" + item };
      });
      this.appointment = orderForm.AppointmentTime;
      orderForm.lnkRegion = "";
      this.orderForm = orderForm;
    },
    async handleOrderAdd() {
      const cancelDescr = this.cancelDescr;
      if (!cancelDescr)
        return uni.showToast({
          title: "请填写拒绝理由",
          icon: "none",
          mask: true,
          position: "center",
        });
      const res = await orderArbitrateEdit({
        RepairId: this.editId,
        Descr: cancelDescr,
      });
      console.log("orderArbitrateAudit res", res);

      if (res.MsgCode != 0) return;
      uni.showToast({
        title: "退款成功",
        icon: "success",
        mask: true,
        position: "center",
      });
      setTimeout(() => {
        this.$navigateBack(this.$router, 1);
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.create-order {
  .create-order-tabs {
    background-color: #fff;
  }

  .sub-title {
    color: $s-manager-color;
    font-size: 28rpx;
    margin-bottom: 24rpx;
  }

  .info-view {
    text-align: right;
    width: 100%;
    white-space: normal;
    word-break: break-all;
    word-wrap: break-word;
  }

  ::v-deep .u-form-item__body__right__message {
    text-align: right;
  }

  .order-form-wrap {
    .order-form-single {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .order-form-title {
        color: #f43030;
        font-size: 30rpx;
        background-color: #fff7f5;
        padding-top: 24rpx;
        padding-bottom: 24rpx;
      }

      ::v-deep .u-textarea {
        border-color: transparent !important;
        padding: 20rpx 30rpx;
        border-radius: 0;
      }

      ::v-deep .u-textarea--disabled {
        background-color: #fff;
      }

      ::v-deep .u-upload__wrap {
        padding: 30rpx;
        border-radius: 16rpx;

        .u-upload__button {
          background-color: #fff7f5;

          .u-icon__icon {
            color: $s-manager-color !important;
            font-size: 80rpx !important;
            line-height: 80rpx !important;
          }
        }
      }
    }

    .order-form-block {
      background-color: #fff;
      box-shadow: $s-bg-shadow;
      border-radius: $s-border-radius;
      margin-bottom: 30rpx;

      .service-staff {
        width: 108px;
        height: 28px;
        border-radius: 14px;
      }

      .justify-right {
        justify-content: right;
        width: 100%;
      }

      ::v-deep .uni-input-wrapper {
        .uni-input-input {
          text-align: right;
        }

        .input-placeholder {
          text-align: right;
          color: #808080;
        }
      }

      ::v-deep .u-form-item__body__left__content__label {
        color: #222;
        font-size: 30rpx;
      }
    }
  }

  .order-popup {
    width: 600rpx;
    padding: 25rpx 30rpx;

    .popup-title {
      color: #333;
      font-weight: bold;
      font-size: 28rpx;
      margin-bottom: 30rpx;
    }

    ::v-deep .uni-input-wrapper {
      .uni-input-input {
        text-align: left;
      }

      .input-placeholder {
        text-align: left;
        color: #808080;
      }
    }

    .popup-tip {
      margin-top: 20rpx;
      color: #555;
      font-size: 22rpx;
    }

    .btns {
      display: flex;
      justify-content: center;
      width: 100%;
      padding: 20rpx 0;
      margin-top: 30rpx;
      background-color: #fff;

      ::v-deep .u-button {
        margin: 0;
      }
    }

    .order-radio {
      padding: 20rpx;
      margin-top: 30rpx;
      // ::v-deep .uicon-checkbox-mark{
      // 	color:#F65D30 !important;
      // }
    }
  }
}
</style>
